<template>
  <div class="container">
    <div class="card-panel search">
      <el-row>
        <el-form :inline="true" :label-position="labelPosition">
          <el-col :span="10">
            <el-form-item label="站点选择" :span="12">
              <el-select v-model="listQuery.stationCode" placeholder="请选择站点" clearable>
                <el-option
                  v-for="item in options_station"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="当前状态">
              <el-select v-model="listQuery.status" placeholder="请选择状态" clearable>
                <el-option
                  v-for="item in options_status"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="设备类型">
              <el-select v-model="listQuery.deviceType" placeholder="请选择设备类型" clearable>
                <el-option
                  v-for="item in options_device_type"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="设备选择">
              <el-select v-model="listQuery.deviceCode" placeholder="请选择设备" clearable>
                <el-option
                  v-for="item in options_device"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-button class="filter-item" type="primary" @click="handleFilter">
              查询
            </el-button>
            <el-button class="filter-item" type="primary" @click="clearSearch">
              清空
            </el-button>
          </el-col>
        </el-form>
      </el-row>
    </div>
    <div class="card-panel table">
      <el-row>
        <el-col :span="6" :offset="18">
          <div style="float: right; margin-bottom: 10px">
            <el-button class="filter-item" type="primary" @click="create">
              添加
            </el-button>
            <el-button class="filter-item" type="primary" @click="update()">
              修改
            </el-button>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-table
          v-loading="listLoading"
          :data="list"
          border
          fit
          highlight-current-row
          style="width: 100%;"
          @selection-change="selectionChange"
        >
          <el-table-column type="selection" label="" align="center" width="50px" />
          <el-table-column label="序号" prop="id" sortable align="center" width="80px" :class-name="getSortClass('id')">
            <template slot-scope="{row}">
              <span>{{ row.id }}</span>
            </template>
          </el-table-column>
          <el-table-column label="能源站" prop="stationName" width="160px" align="center">
            <template slot-scope="{row}">
              <span>{{ row.stationName }}</span>
            </template>
          </el-table-column>
          <el-table-column label="设备编号" prop="deviceCode" width="160px" align="center">
            <template slot-scope="{row}">
              <span>{{ row.deviceCode }}</span>
            </template>
          </el-table-column>
          <el-table-column label="设备名称" prop="deviceName" align="center">
            <template slot-scope="{row}">
              <span class="link-type">{{ row.deviceName }}</span>
            </template>
          </el-table-column>
          <el-table-column label="设备类型" prop="deviceType" width="140px" align="center">
            <template slot-scope="{row}">
              <span>{{ showDeviceType(row.deviceType) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="上次运行时间" prop="lastRunTime" width="160px" align="center">
            <template slot-scope="{row}">
              <span>{{ row.lastRunTime }}</span>
            </template>
          </el-table-column>
          <el-table-column label="设备当前数据" prop="deviceCurrentData" width="180px">
            <template slot-scope="{row}">
              <span>{{ row.deviceCurrentData }}</span>
            </template>
          </el-table-column>
          <el-table-column label="当前状态" prop="status" width="100px" align="center">
            <template slot-scope="{row}">
              <span>{{ showStatus(row.status) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" width="120px" class-name="small-padding fixed-width">
            <template slot-scope="{row,$index}">
              <el-button size="mini" type="danger" @click="remove(row,$index)">
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
      </el-row>
    </div>
    <div class="add">
      <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
        <el-form ref="dataForm" :rules="rules" :model="temp" label-position="left" label-width="110px" style="width: 500px; margin-left:50px;">
          <el-form-item label="能源站" prop="stationName">
            <el-select v-model="temp.stationName" class="filter-item" placeholder="请选择">
              <el-option v-for="item in options_station" :key="item.key" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="设备名称" prop="deviceName">
            <el-select v-model="temp.deviceName" class="filter-item" placeholder="请选择">
              <el-option v-for="item in options_device" :key="item.key" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="设备编号" prop="deviceCode">
            <el-input v-model="temp.deviceCode" placeholder="请输入设备编号" />
          </el-form-item>
          <el-form-item label="设备类型" prop="deviceType">
            <el-select v-model="temp.deviceType" class="filter-item" placeholder="请选择">
              <el-option v-for="item in options_device_type" :key="item.key" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="上次运行时间" prop="lastRunTime">
            <el-date-picker v-model="temp.lastRunTime" type="datetime" placeholder="请选择时间" />
          </el-form-item>
          <el-form-item label="当前状态" prop="status">
            <el-radio-group v-model="temp.status">
              <el-radio label="1">开启</el-radio>
              <el-radio label="2">关闭</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="设备当前数据">
            <el-input v-model="temp.deviceCurrentData" type="textarea" />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">
            取消
          </el-button>
          <el-button type="primary" @click="dialogStatus==='create'?createData():updateDate()">
            确定
          </el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { list } from '@/api/mochaManage/deviceManage'
import Pagination from '@/components/Pagination' // secondary package based on el-pagination

export default {
  name: 'DeviceManage',
  components: { Pagination },
  filters: {

  },
  data() {
    return {
      labelPosition: 'right',
      // 下拉框
      options_station: [{
        value: '1',
        label: '1号能源站'
      }, {
        value: '2',
        label: '2号能源站'
      }, {
        value: '3',
        label: '3号能源站'
      }],
      options_device: [{
        value: 'NY-001',
        label: '冰蓄冷1号机'
      }, {
        value: 'NY-002',
        label: '三联供'
      }, {
        value: 'NY-003',
        label: '地源热泵'
      }],
      options_device_type: [{
        value: '1',
        label: '系统模块'
      }, {
        value: '2',
        label: '热泵'
      }, {
        value: '3',
        label: '压力表'
      }],
      options_status: [{
        value: '1',
        label: '开启'
      }, {
        value: '2',
        label: '关闭'
      }],
      // 表格
      tableKey: 0,
      list: [],
      total: 0,
      listLoading: false,
      listQuery: {
        page: 1,
        limit: 10,
        stationCode: '',
        deviceCode: '',
        deviceType: '',
        status: ''
      },
      // 表单
      textMap: {
        update: '修改设备',
        create: '添加设备'
      },
      dialogFormVisible: false,
      dialogStatus: '',
      temp: {
        id: undefined,
        stationCode: '',
        stationName: '',
        deviceCode: '',
        deviceName: '',
        deviceType: '',
        lastRunTime: undefined,
        deviceCurrentData: '',
        status: '1'
      },
      multipleSelection: [],
      rules: {
        stationCode: [{ required: true, message: '站是必选项', trigger: 'change' }],
        stationName: [{ required: true, message: '站是必选项', trigger: 'change' }],
        deviceCode: [{ required: true, message: '设备是必填项', trigger: 'change' }],
        deviceName: [{ required: true, message: '设备是必填项', trigger: 'change' }],
        deviceType: [{ required: true, message: '设备类型是必选项', trigger: 'change' }],
        lastRunTime: [{ required: true, message: '上次运行时间是必选项', trigger: 'change' }],
        status: [{ required: true, message: '状态是必须项', trigger: 'change' }]
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    handleFilter() {
      this.listQuery.page = 1
      this.getList()
    },
    getList() {
      this.listLoading = true
      this.initData()
      const stationCode = this.listQuery.stationCode
      const deviceCode = this.listQuery.deviceCode
      const deviceType = this.listQuery.deviceType
      const status = this.listQuery.status
      this.list = this.list.filter(function(e) {
        const flag1 = stationCode === '' ? true : e.stationCode === stationCode
        const flag2 = deviceCode === '' ? true : e.deviceCode === deviceCode
        const flag3 = deviceType === '' ? true : e.deviceType === deviceType
        const flag4 = status === '' ? true : e.status === status
        return flag1 && flag2 && flag3 && flag4
      })
      this.total = this.list.length
      this.list = this.list.slice((this.listQuery.page - 1) * this.listQuery.limit, (this.listQuery.page - 1) * this.listQuery.limit + this.listQuery.limit)

      // list(this.listQuery).then(response => {
      //   this.list = response.data.items
      //   this.total = response.data.total
      // })
      setTimeout(() => {
        this.listLoading = false
      }, 1 * 300)
    },
    create() {
      this.resetTemp()
      this.dialogStatus = 'create'
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    update() {
      const rows = this.multipleSelection
      if (rows.length > 1) {
        this.$message('请选择一条数据')
        return
      } else if (rows.length < 1) {
        this.$message('请选择一条数据')
        return
      }
      const row = rows[0]
      this.dialogStatus = 'update'
      this.temp = Object.assign({}, row)
      console.log(this.temp)
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    createData() {
      const stationCode = this.temp.stationCode
      const deviceCode = this.temp.deviceName
      this.options_station.filter(function(e) {
        return e.value === stationCode
      })
      this.options_device.filter(function(e) {
        return e.value === deviceCode
      })
      this.temp.stationName = this.options_station[0].label
      this.temp.deviceName = this.options_device[0].label
      this.temp.lastRunTime = this.temp.lastRunTime.getFullYear() + '-' + (this.temp.lastRunTime.getMonth() + 1) + '-' + this.temp.lastRunTime.getDate()
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          this.temp.id = this.total + 1
          this.list.push(this.temp)
          this.dialogFormVisible = false
          this.$notify({
            title: '成功',
            message: '创建成功',
            type: 'success',
            duration: 2000
          })
        }
      })
    },
    updateDate() {
      const stationCode = this.temp.stationCode
      const deviceCode = this.temp.deviceName
      this.options_station.filter(function(e) {
        return e.value === stationCode
      })
      this.options_device.filter(function(e) {
        return e.value === deviceCode
      })
      this.temp.stationName = this.options_station[0].label
      this.temp.deviceName = this.options_device[0].label
      const dt = new Date(this.temp.lastRunTime)
      this.temp.lastRunTime = dt.getFullYear() + '-' + (dt.getMonth() + 1) + '-' + dt.getDate()
      console.log(this.temp)
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          const index = this.list.findIndex(v => v.id === this.temp.id)
          this.list.splice(index, 1, this.temp)
          this.dialogFormVisible = false
          this.$notify({
            title: '成功',
            message: '修改成功',
            type: 'success',
            duration: 2000
          })
        }
      })
    },
    remove(row, index) {
      this.$notify({
        title: 'Success',
        message: '删除成功',
        type: 'success',
        duration: 2000
      })
      this.list.splice(index, 1)
      this.total = this.total - 1
    },
    resetTemp() {
      this.temp = {
        id: undefined,
        stationCode: '',
        stationName: '',
        deviceCode: '',
        deviceName: '',
        deviceType: '',
        lastRunTime: undefined,
        deviceCurrentData: '',
        status: ''
      }
    },
    selectionChange(val) {
      this.multipleSelection = val
    },
    clearSearch() {
      this.listQuery.stationCode = ''
      this.listQuery.deviceCode = ''
      this.listQuery.deviceType = ''
      this.listQuery.status = ''
    },
    showDeviceType(type) {
      if (type === '1') {
        return '系统模块'
      } else {
        return '热泵'
      }
    },
    showStatus(status) {
      if (status === '1') {
        return '开启'
      } else {
        return '关闭'
      }
    },
    getSortClass: function(key) {
      const sort = this.listQuery.sort
      return sort === `+${key}` ? 'ascending' : 'descending'
    },
    sortChange(data) {
      const { prop, order } = data
      if (prop === 'id') {
        this.sortByID(order)
      }
    },
    changeStation(event, item) {
      console.log(item)
      this.temp.stationName = item.label
    },
    initData() {
      this.total = 11
      this.list = [{
        'id': 1,
        'stationCode': '1',
        'stationName': '1号能源站',
        'deviceName': '冰蓄冷1号机',
        'deviceCode': 'NY-001',
        'deviceType': '1',
        'lastRunTime': '2020-03-04',
        'deviceCurrentData': '123123',
        'status': '1'
      }, {
        'id': 2,
        'stationCode': '1',
        'stationName': '1号能源站',
        'deviceName': '冰蓄冷1号机',
        'deviceCode': 'NY-001',
        'deviceType': '1',
        'lastRunTime': '2020-03-11',
        'deviceCurrentData': '123123',
        'status': '1'
      }, {
        'id': 3,
        'stationCode': '1',
        'stationName': '1号能源站',
        'deviceName': '冰蓄冷1号机',
        'deviceCode': 'NY-001',
        'deviceType': '1',
        'lastRunTime': '2020-03-06',
        'deviceCurrentData': '123123',
        'status': '1'
      }, {
        'id': 4,
        'stationCode': '1',
        'stationName': '1号能源站',
        'deviceName': '冰蓄冷1号机',
        'deviceCode': 'NY-001',
        'deviceType': '1',
        'lastRunTime': '2020-03-22',
        'deviceCurrentData': '001001001',
        'status': '1'
      }, {
        'id': 5,
        'stationCode': '2',
        'stationName': '2号能源站',
        'deviceName': '三联供',
        'deviceCode': 'NY-002',
        'deviceType': '1',
        'lastRunTime': '2020-03-12',
        'deviceCurrentData': '123123',
        'status': '2'
      }, {
        'id': 6,
        'stationCode': '2',
        'stationName': '2号能源站',
        'deviceName': '三联供',
        'deviceCode': 'NY-002',
        'deviceType': '1',
        'lastRunTime': '2020-03-04',
        'deviceCurrentData': '100100100',
        'status': '2'
      }, {
        'id': 7,
        'stationCode': '2',
        'stationName': '2号能源站',
        'deviceName': '三联供',
        'deviceCode': 'NY-002',
        'deviceType': '1',
        'lastRunTime': '2020-03-13',
        'deviceCurrentData': '100100100',
        'status': '2'
      }, {
        'id': 8,
        'stationCode': '2',
        'stationName': '2号能源站',
        'deviceName': '三联供',
        'deviceCode': 'NY-002',
        'deviceType': '1',
        'lastRunTime': '2020-03-25',
        'deviceCurrentData': '100100100',
        'status': '2'
      }, {
        'id': 9,
        'stationCode': '3',
        'stationName': '3号能源站',
        'deviceName': '地源热泵',
        'deviceCode': 'NY-003',
        'deviceType': '2',
        'lastRunTime': '2020-03-09',
        'deviceCurrentData': '100100100',
        'status': '2'
      }, {
        'id': 10,
        'stationCode': '3',
        'stationName': '3号能源站',
        'deviceName': '地源热泵',
        'deviceCode': 'NY-003',
        'deviceType': '2',
        'lastRunTime': '2020-03-04',
        'deviceCurrentData': '100100100',
        'status': '2'
      }, {
        'id': 11,
        'stationCode': '3',
        'stationName': '3号能源站',
        'deviceName': '地源热泵',
        'deviceCode': 'NY-003',
        'deviceType': '2',
        'lastRunTime': '2020-03-07',
        'deviceCurrentData': '100100100',
        'status': '2'
      }, {
        'id': 12,
        'stationCode': '3',
        'stationName': '3号能源站',
        'deviceName': '地源热泵',
        'deviceCode': 'NY-003',
        'deviceType': '2',
        'lastRunTime': '2020-04-11',
        'deviceCurrentData': '100100100',
        'status': '2'
      }]
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  margin: 30px;
  font-size: 20px;
  line-height: 20px;
  .card-panel {
    cursor: pointer;
    font-size: 12px;
    position: relative;
    overflow: hidden;
    color: #666;
    background: #fff;
    box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
    border-color: rgba(0, 0, 0, .05);
    padding: 10px;
  }
  .search{
    .el-form-item {
      margin-bottom: 6px;
    }
  }
  .table{
    margin-top: 10px;
  }
}
</style>
